import React, { useEffect } from 'react'
import { Modal, Form, Input, Button, Select } from 'antd'
import { connect } from 'dva'

const { Option } = Select

const AddOrEditModal = ({
  title,
  visible,
  setVisible,
  dispatch,
  companyId,
  companyDepartmentList,
  form,
  value,
  onSubmit
}) => {
  // const [form] = Form.useForm()
  const handleOk = () => {
    form.validateFields((err, values) => {
      if (err) return
      form.resetFields()
      onSubmit({
        ...values,
        id: value?.id,
      })
    })
  }
  useEffect(() => {
    dispatch({
      type: 'global/getCompanyDepartmentList',
      payload: { companyId },
    })
  }, [])
  return (
    <Modal
      destroyOnClose
      title={title}
      visible={visible}
      onOk={handleOk}
      onCancel={() => setVisible(false)}
      okText="确定"
      cancelText="取消"
    >
      <Form>
        <Form.Item
          label="账号名称"
        >
          {form.getFieldDecorator("mobile", {
            rules: [
              { required: true, message: "请输入账号名称" }
            ],
            initialValue: value?.mobile
          })(<Input allowClear placeholder="请输入账号名称" maxLength={11} />)}
        </Form.Item>
        <Form.Item name="部门" label="部门" rules={[{ required: true }]}>
          {form.getFieldDecorator("companyDepartmentId", {
            initialValue: value?.companyDepartmentId
          })(
            <Select allowClear>
              {companyDepartmentList?.map((item) => (
                <Option value={item.id} key={item.id}>{item.name}</Option>
              ))}
            </Select>
          )}
        </Form.Item>
      </Form>
    </Modal>
  )
}

AddOrEditModal.defaultProps = {
  companyDepartmentList: [],
}

export default Form.create()(connect(({ global }) => ({
  companyDepartmentList: global.companyDepartmentList,
}))(AddOrEditModal))
